<script setup>
import { getDataStatisticAysnc } from '@/api/dataManagement.js'
import * as echarts from 'echarts';

const statisticData = ref({
  proInstIngCount: 0,
  proInstFinishCount: 0
})
const getStatisticData = async () => {
  try {
    const res = await getDataStatisticAysnc()
    if (res.code + '' === '200' && res.data) {
      statisticData.value = res.data
      console.log('%c [ statisticData.value ]-15', 'font-size:13px; background:pink; color:#bf2c9f;', statisticData.value)

    }
  } catch (error) {
    console.log('%c [ error ]-9', 'font-size:13px; background:pink; color:#bf2c9f;', error)
  }
}

// proInstCount 所有流程实例数量
// proInstIngCount  所有进行中的流程数量
// proInstFinishCount  所有已经完成的流程数量
// proDefCount 流程定义数量
// userCount 用户数量
// roleCount 角色数量
// menuCount 菜单数量
// formCount 表单数量

const proInstCount = computed(() => statisticData.value.proInstCount || 0)
const proInstIngCount = computed(() => statisticData.value.proInstIngCount || 0)
const proInstFinishCount = computed(() => statisticData.value.proInstFinishCount || 0)
const proDefCount = computed(() => statisticData.value.proDefCount || 0)
const userCount = computed(() => statisticData.value.userCount || 0)
const roleCount = computed(() => statisticData.value.roleCount || 0)
const menuCount = computed(() => statisticData.value.menuCount || 0)
const formCount = computed(() => statisticData.value.formCount || 0)

const headerList = computed(() => {
  return [
    {
      label: '所有流程实例数量',
      value: proInstCount.value,
      icon: 'CopyDocument',
      color: '#92cbcb'
    },
    {
      label: '所有进行中的流程数量',
      value: proInstIngCount.value,
      icon: 'RemoveFilled',
      color: '#99c334'
    },
    {
      label: '所有已经完成的流程数量',
      value: proInstFinishCount.value,
      icon: 'SuccessFilled',
      color: '#a66ec3'
    },
  ]
})

const bodyDataList = computed(() => {
  return [
    {
      label: '流程定义数量',
      value: proDefCount.value,
    },
    {
      label: '用户数量',
      value: userCount.value,
    },
    {
      label: '角色数量',
      value: roleCount.value,
    },
    {
      label: '菜单数量',
      value: menuCount.value,
    },
    {
      label: '表单数量',
      value: formCount.value,
    },

  ]
})

//柱状图
const barCharts = ref(null)
const initBarCharts = () => {

  const charts = echarts.init(barCharts.value, 'dark')
  const option = {

    legend: {
      show: true,
      top: 'bottom'
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      data: bodyDataList.value.map(item => item.label)
    },
    yAxis: {},
    series: [
      {
        type: 'bar',
        name: '柱状图',
        data: bodyDataList.value.map(item => item.value),
        label: {
          show: true,
          position: 'top'
        },
        itemStyle: {
          barBorderRadius: 5,
          borderWidth: 1,
          borderType: 'solid',
          borderColor: '#73c0de',
          shadowColor: '#5470c6',
          shadowBlur: 3
        }

      },
      {
        type: 'line',
        name: '折线图',
        smooth: true,
        data: bodyDataList.value.map(item => item.value),

      }

    ],
  };
  charts.setOption(option)
  window.onresize = function () {
    charts.resize()
  }
}

//饼图
const pieCharts = ref(null)
const initPieCharts = () => {
  const charts_pie = echarts.init(pieCharts.value, 'dark')
  const option = {

    // title: {
    //   text: '系统相关数据展示',
    //   left: 'center'
    // },
    tooltip: {},
    legend: {
      show: true,
      // orient: '',
      // btoom: 10,
      top: 'bottom'
    },
    emphasis: {
      label: {
        show: false,
        fontSize: '20',
        fontWeight: 'bold'
      }
    },
    series: [
      {
        type: 'pie',
        radius: [20, 120],
        center: ['50%', '50%'],

        data: bodyDataList.value.map(item => {
          return {
            name: item.label,
            value: item.value
          }
        }),
        itemStyle: {
          borderRadius: 40,
          borderWidth: 2,
          borderType: 'solid',
          borderColor: '#73c0de',
          shadowColor: '#5470c6',
          shadowBlur: 10
        },
        startAngle: 180,
        endAngle: 360,
        roseType: 'area'
      },


    ],
  };
  charts_pie.setOption(option)
  window.onresize = function () {
    charts_pie.resize()
  }
}

const initCharts = () => {
  initBarCharts()
  initPieCharts()
}

onMounted(() => {
  getStatisticData()
})

watch(() => statisticData.value, () => {
  initCharts()
})

</script>



<template>
  <div class="statistic-container">
    <div class="header">
      <el-card v-for="(item, index) in headerList" :key="item.label" shadow="hover">
        <div class="icon" :style="{ 'background-color': item.color }">
          <el-icon>
            <component :is="item.icon"></component>
          </el-icon>
        </div>
        <div class="text">
          <span class="data">{{ item.value }}</span>
          <span class="tips">{{ item.label }}</span>
        </div>
      </el-card>
    </div>
    <div class="charts-area">
      <el-card shadow="hover">
        <div class="bar-charts" ref="barCharts"></div>
      </el-card>
      <el-card shadow="hover">
        <div class="bar-charts" ref="pieCharts"></div>
      </el-card>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.statistic-container {
  width: 100%;

  .header {
    display: flex;
    gap: 10px;
    width: 100%;

    :deep(.el-card) {
      width: 33%;
      border-radius: 0% 0% 20% 20%;
    }

    :deep(.el-card__body) {
      display: flex;
      justify-content: space-around;
    }

    .icon {
      height: 80px;
      width: 80px;
      background-color: rgb(10, 114, 114);
      position: relative;
      border-radius: 50% 0;
      margin-right: 10px;

      :deep(.el-icon) {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 40px;
        color: #fff;
      }
    }

    .text {
      display: flex;
      flex-direction: column;

      .data {
        font-size: 40px;
        font-weight: 700;
        color: #7d7d7d;
        text-align: center;
      }

      .tips {
        font-size: 18px;
        font-weight: 700;
        color: #a7a7a7
      }
    }


  }

  .charts-area {
    width: 100%;
    height: auto;
    display: flex;
    margin-top: 20px;
    gap: 20px;

    :deep(.el-card) {
      flex: 1;
    }

    .bar-charts {
      width: 100%;
      height: 300px;
    }
  }
}
</style>